<template>
  <div>
    <div>
      <h3>登录</h3>

      <input
        type="text"
        name="username"
        v-model="user.username"
      > {{user.username}}
      <input
        type="password"
        name="password"
        v-model="user.password"
      >
      <button
        @click="login"
        :disabled="loading"
      >{{loginText}}</button>

    </div>
    <router-link to="/auth/register">注册</router-link>
    <router-link to="/admin/list">后台管理</router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      loginText: "登录",
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
      console.log("login....");
      this.loading = true;
      this.loginText = "登录中...";
      this.$http
        .post("/api/login", this.user)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.$router.push("/admin/list");
          } else {
            this.$message.error(res.message);
          }
        })
        .finally(() => {
          this.loading = false;
          this.loginText = "登录";
        });
    },
  },
};
</script>